<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" :model="q" size="mini">


        <el-form-item>
          <el-button type="text" disabled>{{this.Timetype?'申请时间':'最后更新时间'}}
          </el-button>
          (
          <el-button type="text" @click="toggleTimetype">点击切换</el-button>
          )
          <el-date-picker v-if="Timetype" v-model="q.created_at_begin" value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetime" placeholder="选择日期时间"></el-date-picker>
          <el-date-picker v-else v-model="q.updated_at_begin" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                          placeholder="选择日期时间"></el-date-picker>
          -
          <el-date-picker v-if="Timetype" v-model="q.created_at_end" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                          placeholder="选择日期时间"></el-date-picker>
          <el-date-picker v-else v-model="q.updated_at_end" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                          placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="订单ID:">
          <el-input v-model="q.id"  onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="订单ID" prefix-icon="el-icon-edit"></el-input>
        </el-form-item>
        <el-form-item label="代理账号:">
          <el-select v-model="q.agency_id" clearable filterable placeholder="请输入所属子代">
            <el-option v-for="item of AgencyList" :key="item.id" :label="item.id+'>'+item.user_name+'>'+item.nickname"
              :value="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属总代:">
          <el-select v-model="q.parent_id" clearable filterable placeholder="请输入所属总代">
            <el-option v-for="item of AgencyMainList" :key="item.id" :label="item.id+'>'+item.user_name+'>'+item.nickname"
              :value="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前状态">
          <el-select v-model="q.status" clearable placeholder="请选择">
            <el-option label="所有" :value=null></el-option>
            <el-option v-for="(statu, index) of ReChargeStatus" :key="index" :label="statu" :value="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="danger" @click="reload">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-button size="mini" @click="downloadData" :type="downloading?'info':'primary'" :loading="downloading" icon="el-icon-printer" style="float: right">{{downloading?'导出中...':'导出报表'}}</el-button>
    </div>

    <el-table :data="listData.items"
      v-loading.body="listLoading"
      @sort-change="sortlist"
      size="mini"
      stripe
      border
      fit
      highlight-current-row>
      <el-table-column prop="id" label="订单ID"  width="80"></el-table-column>
      <el-table-column prop="agency_nickname" label='代理账号' min-width="100">
        <template slot-scope="scope">{{scope.row.agency.user_name}}</template></el-table-column>
      <el-table-column prop="parent_name" label='所属总代' min-width="100">
        <template slot-scope="scope">{{scope.row.agency.parent.user_name}}</template>
      </el-table-column>
      <el-table-column prop="amount" label='申请金额' min-width="80"></el-table-column>
      <el-table-column prop="before_amount" label='申请前余额' min-width="100"></el-table-column>
      <el-table-column prop="created_at" label='申请时间' sortable width="180"></el-table-column>
      <el-table-column prop="status" label='当前状态' width="100">
        <template slot-scope="scope">{{ReChargeStatus[scope.row.status]}}</template>
      </el-table-column>
      <el-table-column prop="updated_at" label='最后更新时间' sortable width="180"></el-table-column>
      <el-table-column prop="success_at" label='到账时间' sortable width="180"></el-table-column>
      <el-table-column prop="chase_amount" label='追分金额' min-width="100"></el-table-column>
      <el-table-column prop="reason" label='备注' min-width="280" :show-overflow-tooltip="true"></el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="q.page_no"
        :page-sizes="$store.state.app.pageSizeArr"
        :page-size="q.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listData.total"
      ></el-pagination>
    </div>
    <!--<save-update  v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id" :MerchantType="MerchantType"-->
    <!--:settleCycle="settleCycle"></save-update>-->
  </div>
</template>

<script>
  import {queryFilter} from '@/utils/patch'
  import {getAgencyRechargeList, exportExel,getAgencyList } from '@/api'

  export default {
    data() {
      return {
        listData: {},
        q: {page_size: 30, page_no: 1, agency_type: 1},
        listLoading: false,
        Timetype: false,
        showUpdate: false,
        ReChargeStatus: this.$store.state.app.ReChargeStatus,
        show_id: null,
      AgencyMainList: [],
      AgencyList: [],
        downloading:false
      }
    },
    activated() {
      this.getList()
    },
    created(){
    this.getAgencyList()
    this.getChildAgencyList()
    },
    deactivated() {
      this.listLoading = false
    },
    methods: {
      downloadData(){
        this.downloading = true
        getAgencyRechargeList(Object.assign({},this.q, {export: 1})).then(res => {
          if(res.status === 0){
        this.exportExel(res.data.task_id)
            // this.downloading = false
            // const tHeader = ['订单ID', '所属总代','代理账号', '申请金额', '申请前余额', '申请时间', '当前状态', '到账时间', '最后更新时间', '追分金额', '备注'];
            // const filterVal = ['id', 'agency.parent.user_name','agency.nickname', 'amount:int', 'before_amount:int', 'created_at', 'status', 'success_at', 'updated_at', 'chase_amount:int', 'reason'];
            // downloadDataToFile(res,tHeader,filterVal,`子代充值管理${timedate.dateTodayHMS}`)
          }
        }).catch(() => {
            this.downloading = false
        })
      },
    async exportExel (task_id) {
      const exportStatusRes = await exportExel(task_id)
      if (exportStatusRes.status === 0) {
        switch (exportStatusRes.data.status) {
          case 0:
            setTimeout(() => {
              this.exportExel(task_id)
            }, 1500)
            break
          case 1:
            window.location.href = `${window.location.origin}/export_data/${exportStatusRes.data.file_name}`
            this.downloading = false
            this.$message.success('导出成功')
            break;
          case 2:
              this.$message.info('导出失败')
              this.downloading = false
            break;
          case 3:
              this.$message.info('取消导出')
              this.downloading = false
            break;
        }
      }
    },
      add() {
        this.show_id = null
        this.showUpdate = true
      },
      exportData() {
        this.$message.warning('待开发')
      },
      resetPwd() {
        this.$message.warning('待开发')
      },
      update(row) {
        this.show_id = row.id
        this.showUpdate = true
      },
      toggleTimetype() {
        if (this.Timetype) {
          delete this.q.created_at_begin
          delete this.q.created_at_end
          this.Timetype = !this.Timetype
        } else {
          delete this.q.updated_at_begin
          delete this.q.updated_at_end
          this.Timetype = !this.Timetype
        }
      },
      query() {
        this.q = Object.assign(this.q, {page_no: 1, page_size: 30, agency_type: 1})
        this.getList()
      },
      reload() {
        this.q = {page_size: 30, page_no: 1, agency_type: 1}
        this.getList()
      },
      sortlist(sort) {
        this.q.$orderby = sort.prop
        this.getList()
      },
      handleSizeChange(val) {
        this.q.page_size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.q.page_no = val
        this.getList()
      },
    getAgencyList () {
      getAgencyList({ agency_type: 2, page_size: 1000 }).then(res => {
        if (res.status === 0) {
          this.AgencyMainList = res.data.items
        }
      })
    },
    getChildAgencyList () {
      getAgencyList({ agency_type: 1, page_size: 1000 }).then(res => {
        if (res.status === 0) {
          this.AgencyList = res.data.items
        }
      })
    },
      getList() {

        this.q = queryFilter(this.q)
        getAgencyRechargeList(this.q).then(res => {
          if (res.status === 0) {
            this.listLoading = false
            this.listData = res.data
            this.listData.items = Array.from(res.data.items,x=>Object.assign({},x,{amount:Number(x.amount)/100,before_amount:Number(x.before_amount)/100,chase_amount:Number(x.chase_amount)/100}))
          }
        })

      }
    },
    watch: {
      showUpdate() {
        if (!this.showUpdate) {
          this.getList()
        }
      }
    }
  }
</script>
